<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>AI交易模拟器 - 控制台</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico?v={{ app_version }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link rel="stylesheet" href="/static/style.css?v={{ app_version }}">
</head>
<body>
    <div class="app-container">
        <!-- Header -->
        <header class="app-header">
            <div class="header-content">
                <div class="header-left">
                    <h1 class="app-title">AI交易模拟器</h1>
                    <div class="header-status">
                        <span class="status-dot active"></span>
                        <span class="status-text">运行中</span>
                    </div>
                </div>
                <div class="header-right">
                    <a href="/" class="btn-icon" title="返回主页">
                        <i class="bi bi-house-fill"></i>
                    </a>
                    <span class="user-info" id="userInfo">加载中...</span>
                    <button class="btn-icon" id="themeToggle" title="切换主题">
                        <i class="bi bi-moon-fill"></i>
                    </button>
                    <button class="btn-icon" id="refreshBtn">
                        <i class="bi bi-arrow-clockwise"></i>
                    </button>
                    <button class="btn-secondary" id="logoutBtn">
                        <i class="bi bi-box-arrow-right"></i>
                        登出
                    </button>
                    <button class="btn-primary" id="addModelBtn">
                        <i class="bi bi-plus-lg"></i>
                        添加模型
                    </button>
                </div>
            </div>
        </header>

        <div class="app-body">
            <!-- Sidebar -->
            <aside class="app-sidebar">
                <div class="sidebar-section">
                    <div class="section-header">
                        <span>交易模型</span>
                    </div>
                    <div id="modelList" class="model-list"></div>
                </div>

                <div class="sidebar-section">
                    <div class="section-header">
                        <span>市场行情</span>
                    </div>
                    <div id="marketPrices" class="market-prices"></div>
                </div>
            </aside>

            <!-- Main Content -->
            <main class="app-main">
                <!-- Stats Cards -->
                <div class="stats-grid" id="statsGrid">
                    <div class="stat-card">
                        <div class="stat-header">
                            <span class="stat-label">账户总值</span>
                            <i class="bi bi-wallet2 text-primary"></i>
                        </div>
                        <div class="stat-value">$0.00</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">
                            <span class="stat-label">可用现金</span>
                            <i class="bi bi-cash text-success"></i>
                        </div>
                        <div class="stat-value">$0.00</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">
                            <span class="stat-label">已实现盈亏</span>
                            <i class="bi bi-graph-up text-info"></i>
                        </div>
                        <div class="stat-value">$0.00</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">
                            <span class="stat-label">未实现盈亏</span>
                            <i class="bi bi-graph-down text-warning"></i>
                        </div>
                        <div class="stat-value">$0.00</div>
                    </div>
                </div>

                <!-- Chart -->
                <div class="content-card">
                    <div class="card-header">
                        <h3 class="card-title">账户价值走势</h3>
                    </div>
                    <div class="card-body">
                        <div id="accountChart" style="width: 100%; height: 300px;"></div>
                    </div>
                </div>

                <!-- K线图 -->
                <div class="content-card">
                    <div class="card-header">
                        <h3 class="card-title">市场K线图</h3>
                        <div style="display: flex; gap: 12px; align-items: center;">
                            <select id="klineSelect" class="coin-select">
                                <option value="BTC">BTC</option>
                                <option value="ETH">ETH</option>
                                <option value="SOL">SOL</option>
                                <option value="BNB">BNB</option>
                                <option value="XRP">XRP</option>
                                <option value="DOGE">DOGE</option>
                            </select>
                            <button id="klineColorToggle" class="btn-secondary" style="padding: 6px 12px; font-size: 12px;">
                                <i class="bi bi-palette"></i> 绿涨红跌
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="klineChart" style="width: 100%; height: 400px;"></div>
                    </div>
                </div>

                <!-- Tabs -->
                <div class="content-card">
                    <div class="card-tabs">
                        <button class="tab-btn active" data-tab="positions">持仓</button>
                        <button class="tab-btn" data-tab="trades">交易记录</button>
                        <button class="tab-btn" data-tab="conversations">AI对话</button>
                    </div>

                    <div class="tab-content active" id="positionsTab">
                        <div class="table-container">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>币种</th>
                                        <th>方向</th>
                                        <th>数量</th>
                                        <th>开仓价</th>
                                        <th>当前价</th>
                                        <th>杠杆</th>
                                        <th>盈亏</th>
                                    </tr>
                                </thead>
                                <tbody id="positionsBody">
                                    <tr><td colspan="7" class="empty-state">暂无持仓</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="tab-content" id="tradesTab">
                        <div class="table-container">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>时间</th>
                                        <th>币种</th>
                                        <th>操作</th>
                                        <th>数量</th>
                                        <th>价格</th>
                                        <th>盈亏</th>
                                    </tr>
                                </thead>
                                <tbody id="tradesBody">
                                    <tr><td colspan="6" class="empty-state">暂无交易记录</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="tab-content" id="conversationsTab">
                        <div id="conversationsBody" class="conversations-list">
                            <div class="empty-state">暂无对话记录</div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- Add Model Modal -->
    <div class="modal" id="addModelModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>添加交易模型</h3>
                <button class="btn-close" id="closeModalBtn">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>名称</label>
                    <input type="text" id="modelName" placeholder="例如: GPT-4" class="form-input">
                </div>
                <div class="form-group">
                    <label>API密钥</label>
                    <input type="password" id="apiKey" placeholder="sk-..." class="form-input">
                </div>
                <div class="form-group">
                    <label>API地址</label>
                    <input type="text" id="apiUrl" placeholder="https://api.openai.com" class="form-input">
                </div>
                <div class="form-group">
                    <label>模型名称</label>
                    <input type="text" id="modelIdentifier" placeholder="gpt-4" class="form-input">
                </div>
                <div class="form-group">
                    <label>初始资金</label>
                    <input type="number" id="initialCapital" value="10000" class="form-input">
                </div>
                <div class="form-group">
                    <label>交易策略 (可选)</label>
                    <textarea id="systemPrompt" placeholder="自定义AI交易策略，留空则使用默认策略..." class="form-textarea" rows="6"></textarea>
                    <small class="hint-text">提示：你可以设置自己的交易风格、风险偏好、技术指标偏好等</small>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-secondary" id="cancelBtn">取消</button>
                <button class="btn-primary" id="submitBtn">确认添加</button>
            </div>
        </div>
    </div>

    <!-- Edit Model Modal -->
    <div class="modal" id="editModelModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>编辑交易策略</h3>
                <button class="btn-close" id="closeEditModalBtn">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="editModelId">
                <div class="form-group">
                    <label>名称</label>
                    <input type="text" id="editModelName" class="form-input" disabled>
                    <small class="hint-text">模型名称不可修改</small>
                </div>
                <div class="form-group">
                    <label>API密钥</label>
                    <input type="password" id="editApiKey" class="form-input" disabled value="••••••••">
                    <small class="hint-text">API密钥不可修改</small>
                </div>
                <div class="form-group">
                    <label>API地址</label>
                    <input type="text" id="editApiUrl" class="form-input" disabled>
                    <small class="hint-text">API地址不可修改</small>
                </div>
                <div class="form-group">
                    <label>模型名称</label>
                    <input type="text" id="editModelIdentifier" class="form-input" disabled>
                    <small class="hint-text">模型名称不可修改</small>
                </div>
                <div class="form-group">
                    <label>初始资金</label>
                    <input type="number" id="editInitialCapital" class="form-input" disabled>
                    <small class="hint-text">初始资金不可修改</small>
                </div>
                <div class="form-group">
                    <label>交易策略</label>
                    <textarea id="editSystemPrompt" placeholder="自定义AI交易策略..." class="form-textarea" rows="8"></textarea>
                    <small class="hint-text" style="color: #3370FF; font-weight: 500;">✓ 只有交易策略可以修改</small>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-secondary" id="cancelEditBtn">取消</button>
                <button class="btn-primary" id="submitEditBtn">保存修改</button>
            </div>
        </div>
    </div>


    <script src="/static/app.js?v={{ app_version }}"></script>
</body>
</html>

